<template>
  <el-row>
    <el-col :span="8" style="padding-right: 10px;">
      <el-card class="box-card">
        <div class="user">
          <img src="../assets/images/头像.png" alt="">
          <div class="userinfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间:<span>2021-7-19</span></p>
          <p>上次登录时间:<span>湖北武汉</span></p>
        </div>
      </el-card>
      <el-card style="margin-top: 20px;height: 460px;">
        <el-table :data="tableData" style="width: 100%;">
            <el-table-column v-for="(val,key) in tableLabel" :prop="key" :label="val"></el-table-column>
          </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="padding-left: 10px;">
   <div class="num">
        <el-card v-for="item in countData" :key="item.name" :body-style="{display:'flex',padding:0}">
          <i class="icon" :class="`el-icon-${item.icon}`" :style=" {background: item.color}"></i>
          <div class="detail">
            <p class="num">￥{{ item.value }}</p>
            <p class="txt">{{ item.name }}</p>
          </div>
        </el-card>
    </div>
    <el-card style="height: 280px;">
      <!-- 折线图 -->
       <div ref="echarts1" style="height: 280px;"></div>
    </el-card>
    <div class="graph">
      <el-card style="height: 260px;">
        <div ref="echarts2" style="height: 260px;"></div>
      </el-card>
      <el-card style="height: 260px;">
      <div ref="echarts3" style="height: 240px;"></div>
    </el-card>
    </div>
    </el-col>
  </el-row>
</template>

<script>
import { triggerRef } from 'vue';
import {getData} from '../api'
import * as echarts from 'echarts'
import axios from 'axios';
export default {
data(){
    return {
      tableData:[],
      tableLabel:{  
          name:'课程',
          todayBuy:'今日购买',
          monthBuy:'本月购买',
          totalBuy:'总购买'
      },
      countData:[
        {
          name:"今日支付订单",
          value:1234,
          icon:"success",
          color:"#2ec7c9"
        },
        {
          name:"今日收藏订单",
          value:210,
          icon:"star-on",
          color:"#ffb980"
        },
        {
          name:"今日未支付订单",
          value:1234,
          icon:"s-goods",
          color:"#5ab1ef"
        },
        {
          name:"本月支付订单",
          value:1234,
          icon:"success",
          color:"#2ec7c9"
        },
        {
          name:"本月收藏订单",
          value:210,
          icon:"star-on",
          color:"#ffb980"
        },
        {
          name:"本月未支付订单",
          value:1234,
          icon:"s-goods",
          color:"#5ab1ef"
        }
      ]
    }
},
mounted(){
  getData().then(({data})=>{
    const {tableData}=data.data
    this.tableData = tableData
    //初始化实例
    const echarts1 = echarts.init(this.$refs.echarts1)
    const echarts2 = echarts.init(this.$refs.echarts2)
    //指定数据,配置项
    
    var option1 = {}

    //处理数据xAxis
    const {orderData,userData,videoData}=data.data
  
    const xAxis = Object.keys(orderData.data[0])
    const xAxisData={
      data:xAxis
    }
    option1.xAxis = xAxisData
    option1.yAxis = {}
    option1.legend = xAxisData
    option1.series = []
    xAxis.forEach(key=>{
      option1.series.push({
        name:key,
        data:orderData.data.map(item=>item[key]),
        type:'line'
      })
    })
    //柱状图
    var option2 = {
      legend:{
        textStyle:{
          color:"#333"
        },
      },
      grid:{
        left:"20%"
      },
      tooltip:{
        trigger:"axis"
      },
      xAxis:{
        type:"category",
        data:userData.map(item=>item.date),
        axisLine:{
          lineStyle:{
            color:"#17b3e3"
          },
        },
        axisLabel:{
          interval:0,
          color:"#333"
        }
      },
      yAxis:[
        {
          type:"value",
          axisLine:{
            lineStyle:{
              color:"#17b3a3"
            }
          }
        }
      ],
      color:["#2ec7c9","#b6a2de"],
      series:[
        {
          name:'新增用户',
          data:userData.map(item=>item.new),
          type:'bar'
        },
        {
          name:'活跃用户',
          data:userData.map(item=>item.active),
          type:'bar'
        }
      ]
    }

    //饼状图
    const echarts3 =echarts.init(this.$refs.echarts3)
    var option3= {
        tooltip:{
          trigger:"item"
        },
        color:[
          "#0f78f4",
          "#dd536b",
          "#9462e5",
          "#a6a6a6",
          "#e1bb22",
          "#39c362",
          "#3ed1cf"
        ],
        series:[
          {
            data:videoData,
            type:'pie'
          }
        ]
    }
    //创建图表
      echarts1.setOption(option1)
      echarts2.setOption(option2)
      echarts3.setOption(option3)
    })
  }
}
</script>

<style lang="less" scoped>
.user{
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  img{
    margin-right: 40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .userinfo{
    .name{

       font-size: 32px;
       margin-bottom: 10px;
    }
    .access{
      color:#999999;
    }
  }
}
.login-info{
  p{
    line-height: 28px;
    font-size: 14px;
    color:#999999;
    span{
      color:#666666;
      margin-left: 60px;
    }
  }
}
.num{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .el-card{
    width: 32%;
    margin-bottom: 20px;
  }
  .icon{
    width:80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: #fff;
  }
  .detail{
    margin-left: 15px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    .num{
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
    }
    .txt{
      font-size: 14px;
      text-align: center;
      color: #999999;
    }
  }
}
.graph{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .el-card{
    width: 48%;
  }
}
</style>